<template>
  <button
    type="button"
    class="btn-next"
    :disabled="internalDisabled"
    @click="$emit('click')"
  >
    <span v-if="nextText">{{ nextText }}</span>
    <h-icon class="icon" v-else :icon="nextIcon!"></h-icon>
  </button>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import type { NextProps } from "./type";
import HIcon from "@/components/Icon/HIcon.vue";

const {
  currentPage,
  pageCount,
  disabled,
  nextText,
  nextIcon = ["fas", "arrow-right"],
} = defineProps<NextProps>();

defineEmits(["click"]);

const internalDisabled = computed(
  () => disabled || currentPage === pageCount || pageCount === 0
);
</script>

<style scoped>
@import url(./style.css);
</style>
